import React, { forwardRef, useState, useEffect } from 'react'
import './style/Newinfo2.scss'
// import style from './Animalmanagement.module.css'
import * as echarts from "echarts";
const Newinfo2 = forwardRef((props, ref) => {
  const [infodata, setdata] = useState([])
  const getdata = () => {
    // setdata(ref)

  }

  const drawbar = () => {

    var myChart = echarts.init(document.getElementById("Newinfo2_barli"));
    var option = {
      // backgroundColor: "#2c343c",
      title: {
        text: "2023年各个天气灾害占比",
        left: "center",
        top: 20,
        textStyle: {
          color: "#ccc",
        },
      },

      tooltip: {
        trigger: "item",
        formatter: "{b} : {c} ({d}%)",
      },

      visualMap: {
        show: false,
        min: 500,
        max: 600,
        inRange: {
          //colorLightness: [0, 1]
        },
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: "50%",
          center: ["50%", "50%"],
          color: ["rgb(50,100,255)", "rgb(250,55,126)", "rgb(255,72,79)", "rgb(255,115,33)",'rgb(55,212,92)','rgb(156,32,209)'], //'#FBFE27','rgb(11,228,96)','#FE5050'
          data: [
            {
              value: 285,
              name: "暴雨洪水",
            },
            {
              value: 270,
              name: "台风",
            },
            {
              value: 274,
              name: "龙卷风",
            },
            {
              value: 235,
              name: "雪灾",
            },
             {
              value: 174,
              name: "高温热浪",
            },
            {
              value: 95,
              name: "冰雹",
            },
          ],

          label: {
            normal: {
              formatter: ["{c|{c}}", "{b|{b}}"].join("\n"),
              rich: {
                c: {
                  color: "rgb(241,246,104)",
                  fontSize: 20,
                  fontWeight: "bold",
                  lineHeight: 5,
                },
                b: {
                  color: "rgb(98,137,169)",
                  fontSize: 15,
                  height: 40,
                },
              },
            },
          },
          labelLine: {
            normal: {
              lineStyle: {
                color: "rgb(98,137,169)",
              },
              smooth: 0.2,
              length: 30,
              length2: 20,
            },
          },
          itemStyle: {
            normal: {
              shadowColor: "rgba(0, 0, 0, 0.8)",
              shadowBlur: 50,
            },
          },
        },
      ],
    };


    myChart.setOption(option)

    // console.log(timer);
    window.onresize = () => {
      myChart.resize();
    }

  }
  const drawbar2 = () => {

    let arr = [
      { name: '暴雨洪水', value: 208 },
      { name: '台风', value: 205 },
      { name: '龙卷风', value: 138 },
      { name: '雪灾', value: 56 },
      { name: '高温热浪', value: 40 },
      { name: '冰雹', value: 26 },
   ]
    var myChart = echarts.init(document.getElementById("Newinfo2_barli2"));
    var option = {
      // backgroundColor: '#0E1327',
      title: {
         text: '2011-2023年各个天气灾害发生次数',
         textStyle: {
            color: "#ccc",
            fontSize: 25
         },
         top: "0%",
         left: 'center',
         // 		right: '5%'
      },
      dataZoom: [{
         type: 'slider',
         backgroundColor: 'rgba(245,245,245)',
         backgroundColor: 'transparent',
         brushSelect: false,
         width: 7,
         show: true, //flase直接隐藏图形
         yAxisIndex: [0],
         //left: 'center', //滚动条靠左侧的百分比
         //bottom: 13,
         startValue: 0, //滚动条的起始位置
         endValue: 6, //滚动条的截止位置（按比例分割你的柱状图x轴长度）

         handleStyle: {
            color: '#fff',
            borderColor: '#E8E8E8',
         },
         fillerColor: '#E8E8E8',
         borderColor: 'transparent',
         showDetail: false,

         dataBackground: {
            areaStyle: {
               opacity: 0
            },
            lineStyle: {
               color: 'transparent'
            },
         },

      }],
      legend: {
         show: false,
      },
      grid: {
         left: "25%",
         right: "20%",
         bottom: "5%",
         top: "15%",
         containLabel: true,
      },
      tooltip: {
         trigger: "axis",
         axisPointer: {
            lineStyle: {
               color: "#86909C", //显示竖线颜色
               type: "dashed",
            },
         },
         backgroundColor: "none", //tooltip背景色
         borderColor: "rgba(204,204,204,0.1)", //tooltip边框颜色
         borderWidth: 1,
         borderRadius: 4,
         width: 300,
         formatter: function (params) {
            //自定义tooltip内容
            var text = "";
            arr.map(val => {
               params.map(v => {
                  if (val.name == v.name) {
                     text += `<div style="background: rgba(204,204,204,0.1);border-radius:4px;padding:8px;backdrop-filter: blur(5px);box-shadow: 0px 0px 16px 0px rgba(29,48,92,0.15);">
                              <h2 style="color:#fff;font-size:12px;">${val.name} </h2>
                              <div  style="background:#ffffff;border-radius:6px;margin:4px;padding:4px 8px;color:#000000;margint-bottom:30px">
                                 <b style="display:inline-block;width:8px;height:8px;border-radius:6px;"></b>
                                 <span style="color:#4E5969;">${v.seriesName} </span>
                                 <span style="float:right;color:#1D2129;font-size:12px;">${v.value}</span>
                              </div>
                        </div>`;
                  }
                  return v
               })
               return val
            })
            return text;
         },
      },
      xAxis: [
         {
            splitLine: {
               show: false,
            },
            type: "value",
            show: false,
         },
      ],
      yAxis: [
         {
            splitLine: {
               show: false,
            },
            axisLine: {//y轴
               show: false,
            },
            type: "category",
            axisTick: {
               show: false,
            },
            inverse: true, // 倒序
            boundaryGap: false, // 留白政策
            data: arr.map(v => v.name),
            axisLabel: {
               color: "#fff",
               align: 'left',
               padding: [-10, 0, 0, -250],
               verticalAlign: "top",
               formatter: (name, index) => {
                  let i = arr.findIndex(v => v.name == name);
                  if (i == 0) {
                     return [`{lg1|${i + 1}} ` + "{title|" + name + "} "].join("\n");
                  } else if (i == 1) {
                     return [`{lg2|${i + 1}} ` + "{title|" + name + "} "].join("\n");
                  } else if (i == 2) {
                     return [`{lg3|${i + 1}} ` + "{title|" + name + "} "].join("\n");
                  } else {
                     return [`{lg|${i + 1}} ` + "{title|" + name + "} "].join("\n");
                  }
               },
               rich: {
                  lg1: {
                     backgroundColor: "#bb505d",
                     color: '#fff',
                     borderRadius: 5,
                     padding: 5,
                     align: "center",
                     width: 32,
                     height: 32,
                     lineHeight: 32,
                     fontSize: 19,
                     fontFamily: 'Source Han Sans CN-Regular',
                  },
                  lg2: {
                     backgroundColor: "#dec674",
                     color: '#fff',
                     borderRadius: 5,
                     padding: 5,
                     align: "center",
                     width: 32,
                     height: 32,
                     lineHeight: 32,
                     fontSize: 19,
                     fontFamily: 'Source Han Sans CN-Regular',
                  },
                  lg3: {
                     backgroundColor: "#84bf96",
                     color: '#fff',
                     borderRadius: 5,
                     padding: 5,
                     align: "center",
                     width: 32,
                     height: 32,
                     lineHeight: 32,
                     fontSize: 19,
                     fontFamily: 'Source Han Sans CN-Regular',
                  },
                  lg: {
                     backgroundColor: "rgba(57, 126, 240, 0.1)",
                     color: '#fff',
                     borderRadius: 5,
                     padding: 5,
                     align: "center",
                     width: 32,
                     height: 32,
                     lineHeight: 32,
                     fontSize: 19,
                     fontFamily: 'Source Han Sans CN-Regular',
                  },
                  title: {
                     color: '#fff',
                     align: "right",
                     fontSize: 18,
                     fontFamily: 'Source Han Sans CN-Regular',
                     padding: [0, 0, 0, 21],
                  }
               },
            },
         },
      ],
      series: [
         {
            name: "发生次数",
            type: "bar",
            barWidth: 15, // 柱子宽度
            showBackground: true,
            backgroundStyle: {
               color: 'rgba(57, 126, 240, 0)',
               borderColor: 'rgba(57, 126, 240, 0.04)',
               borderWidth: 20
            },
            label: {
               show: true,
               formatter: '发生次数：{c}',
               color: "#fff",
               fontFamily: "HarmonyOS Sans-Medium",
               fontSize: 14,
               position: 'right'
            },
            itemStyle: {
               barBorderRadius: [0, 3, 3, 0], // 圆角（左上、右上、右下、左下）
               color: {
                  x: 0,
                  y: 1,
                  x2: 1,
                  y2: 0,
                  colorStops: [{
                     offset: 0,
                     color: '#ffce7b' // 0% 处的颜色
                  }, {
                     offset: 1,
                     color: '#ffe600' // 100% 处的颜色
                  }],
               },
            },
            data: arr.map(v => v.value),
         },
      ],
   };
    myChart.setOption(option)

    // console.log(timer);
    window.onresize = () => {
      myChart.resize();
    }

  }

  useEffect(() => {
    drawbar()
    drawbar2()
    console.log(infodata);
    getdata()

  }, [])
  // console.log(ref);
  return (
    <div className='Newinfo2_showli'>
      {/* {drawlist()} */}
      <div id='Newinfo2_barli'></div>
      <div id='Newinfo2_barli2'></div>
    </div>
  )
})

export default Newinfo2